﻿;(function($) {
	var isIe = $.browser.msie;
	//工具函数，当图像横过来的时候，如果横向宽度不够，返回按比例缩放后的图像的宽和高
	function _helper(num , w, h , max) {
		if(h > max && num % 2 != 0) {
			w = w * max / h;
			return {w : w , h : max};
		} else {
			return {w : w , h : h};
		}
	}
	//ie上面使用滤镜对图片进行翻转
	function rotateIe(node , num , w , h , max) {
		//当前宽高和应该变成的宽高比较，如果不对，赋值。
		var s = _helper(num , w, h , max);
		var curW = node.width();
		var curH = node.height();
		if(s.w != curW || s.h != curH) {
			node.attr({width : s.w , height : s.h});
		}
		//调用滤镜css，0,1,2,3分别对应逆时针方向旋转0,90,180,270
		node.css("filter" , "progid:DXImageTransform.Microsoft.BasicImage(Rotation=" + num + ")");
	}
	//W3上面的图片翻转
	function rotateW3(node , num , w , h , max) {
		//隐藏图片并添加canvas元素
		if(node.css("display") != 'none') {
			node.hide();
		}
		var canvas = node.next();
		if(!canvas.length || !canvas.is("canvas")) {
			canvas = $("<canvas class='zoomout ac_zoomout'></canvas>").insertAfter(node);
		}
		//调用工具类得到图片应该呈现的宽高
		var s = _helper(num , w, h , max);
		//对比当前图片宽高，与标准不同时进行更改
		var curW = node.width();
		var curH = node.height();
		if(s.w != curW || s.h != curH) {
			node.attr({width : s.w , height : s.h});
		}
		//得到当前canvas元素的宽高，对应翻转时的宽高分别是(  0 ,  90 ,  180 , 270)
		//如果与标准不同，进行更新                        [w,h] [h,w] [w,h] [h,w]
		var csW = canvas.width();
		var csH = canvas.height();
		if(num % 2 != 0) {
			if(csW != s.h || csH != s.w) {
				canvas.attr({width : s.h , height: s.w});
			}
		} else {
			if(csW != s.w || csH != s.h) {
				canvas.attr({width : s.w , height: s.h});
			}
		}
		//拿两张纸转一下，算出来应该画图的起点，rotate是逆时针旋转的
		//画的是整张图片，同时赋一下画图的宽度和高度
		var se = [[0,0] , [0,-s.h] , [-s.w ,- s.h] , [-s.w,0]];
		var ctx = canvas[0].getContext("2d");
		if(num != 0) {
			ctx.rotate(90 * num * Math.PI/180);
		}
		ctx.drawImage(node[0],se[num][0],se[num][1] , s.w , s.h);
	}
	//工具函数，第一次调用的时候给图片缓存一个{width:realwidth,height:realheight}的对象
	$.fn.storeImgSize = function(w) {
		var _this = this[0];
		var size = $(_this).data("size");
		if(!size) {
			//$(_this).wrap('<div style="width:' + w + 'px;overflow:hidden;"></div>');
			size = {width : _this.width , height : _this.height};
			$(_this).data("size" , size);
		} 
		return size;
	};
	$.fn.rotateRight = function(d) {
		var settings = {
			max : 436
		};
		$.extend(settings,d);
		return this.each(function() {
			var $this = $(this);
			var size = $this.storeImgSize(settings.max);
			var num = $this.data("rotate");
			if(num === null || num === undefined) {
				num = 0;
			}
			num++;
			if(num == 4) {
				num = 0;
			}
			$this.data("rotate" , num);
			if(isIe) {
				rotateIe($this , num , size.width , size.height , settings.max);
			} else {
				rotateW3($this , num , size.width , size.height , settings.max);
			}
		});
	};	
	$.fn.rotateLeft = function(d) {
		var settings = {
			max : 436
		};
		$.extend(settings,d);
		return this.each(function() {
			var $this = $(this);
			var size = $this.storeImgSize(settings.max);
			var num = $this.data("rotate");
			if(num === null || num === undefined) {
				num = 4;
			}
			num--;
			if(num == -1) {
				num = 3;
			}
			$this.data("rotate" , num);
			if(isIe) {
				rotateIe($this , num , size.width , size.height , settings.max);
			} else {
				rotateW3($this , num , size.width , size.height , settings.max);
			}
		});
	};
})(jQuery);